@import "base.less";
.main-body{
	width: 100%;
	height: 100%;
	background: url(../image/main-bg.png) center center no-repeat;
	background-size: cover;
	box-sizing:border-box;
	.placeholder{
		width: 100%;
		height: 196/@ag-num;
	}
	.index-header{
		display: block;
		width: 617/@ag-num;
		height: 202/@ag-num;
		margin: 52/@ag-num auto 0 auto;
		img{
			display: block;
			width: 100%;
			height: 100%;
		}
	}
	.logo{
		display: block;
		width: 204/@ag-num;
		height: 204/@ag-num;
		margin: 0 auto;
		img{
			display: block;
			width: 100%;
			height: 100%;
		}
	}
	.btn-icon{
		width: 28/@ag-num;
		height: 28/@ag-num;
		background: url(../image/btn-icon.png) center center no-repeat;
		background-size: cover;
	}
	.btn-group{
		display: block;
		width: 659/@ag-num;
		height: 296/@ag-num;
		margin: 133/@ag-num auto 0 auto;
		background: white;
		border-radius: 10/@ag-num;
		padding-top: 40/@ag-num;
		.answer-time{
			border-bottom: 1px solid #C4C4C4;
			width: 573/@ag-num;
			line-height: 88/@ag-num;
			height: 88/@ag-num;
			padding: 0 57/@ag-num;
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			color: #808080;
			font-size: 24/@ag-num;
			margin: 0 auto 40/@ag-num auto;
		}
		.btn-answer{
			text-align: center;
			line-height: 88/@ag-num;
			display: block;
			width: 541/@ag-num;
			height: 88/@ag-num;
			background: url(../image/btn-bg.png) center center no-repeat;
			background-size: cover;
			border-radius: 1000px;
			color: white;
			font-size: 30/@ag-num;
			border: none !important;
			outline: none;
			margin: 0 auto;
			margin-bottom: 50/@ag-num;
			cursor: pointer;
			span{
				position: relative;
				box-sizing: border-box;
				padding-right: 40/@ag-num;
				.btn-icon{
					position: absolute;
					right: -5/@ag-num;
					top: 50%;
					margin-top: -14/@ag-num;
				}
			}
			&:active{
				opacity: 0.8 !important;
			}
		}
	}
	.inner-logo{
	}
	.inner-body{
		padding-top: 115/@ag-num;
		text-align: center;
		&:after{
			display: block;
			clear: both;
			content: '';
		}
		.time{
			font-size: 80/@ag-num;
			color: white;
			margin: 0 auto;
		}
	}
	.answer-box{
		position: relative;
		box-sizing: border-box;
		color: #18181A;
		font-size: 30/@ag-num;
		background: white;
		border-radius: 10/@ag-num;
		width: 650/@ag-num;
		margin: 30/@ag-num auto 0 auto;
		padding-bottom: 60/@ag-num;
		.answer-header{
			display: flex;
			justify-content: space-between;
			line-height: 95/@ag-num;
			.q-type{
				width: 384/@ag-num;
				height: 95/@ag-num;
				color: white;
				background: url(../image/q-type-bg.png) left top no-repeat;
				background-size: cover;
				box-sizing: border-box;
				padding: 0 20/@ag-num;
				text-align: center;
			}
			.q-number{
				font-size: 30/@ag-num;
				color: #17181A;
				text-align: center;
				width: 266/@ag-num;
			}
		}
		.question{
			padding: 0 60/@ag-num;
			margin-top: 50/@ag-num;
			.user-name{
				font-size: 40/@ag-num;
				color: #18181A;
				font-weight: 700;
			}
			.answer-title{
				font-size: 30/@ag-num;
				color: #18181A;
				margin: 10/@ag-num 0;
			}
			.answer-list{
				.item{
					margin-bottom: 60/@ag-num;
					display: flex;
					justify-content: space-between;
				}
			}
			.btn-close{
				outline: none;
				border: none;
				display: block;
				background: url(../image/btn-bg.png) center center no-repeat;
				background-size: cover;
				border-radius: 100/@ag-num;
				color: white;
				font-size: 30/@ag-num;
				width: 100%;
				height: 88/@ag-num;
				line-height: 88/@ag-num;
				&:active{
					opacity: 0.8;
				}
			}
		}
		.option-list{
			padding: 0 60/@ag-num;
			margin-top: 30/@ag-num;
			li{
				width: 100%;
				height: 88/@ag-num;
				border: 1px solid #C4C4C4;
				border-radius: 100/@ag-num;
				font-size: 30/@ag-num;
				margin-top:30/@ag-num;
				text-align: center;
				line-height: 88/@ag-num;
				cursor: pointer;
				color: #18181A;
				&.active{
					background: #b39efe;
					color: white;
				}
				&:active{
					background: #b39efe;
					color: white;
				}
			}
		}
		.judge-list{
			padding: 0 60/@ag-num;
			margin-top: 30/@ag-num;
			ul{
				display: flex;
				justify-content: space-between;
				width: 400/@ag-num;
				margin: 0 auto;
			}
			li{
				width: 128/@ag-num;
				height: 128/@ag-num;
				margin-top:30/@ag-num;
				cursor: pointer;

				.judge-li{
					display: block;
					width: 100%;
					height: 100%;
					background-position: center center;
					background-repeat: no-repeat;
					background-size: cover;
					&.hook{
						background-image: url(../image/hook.png);
						&.active{
							background-image: url(../image/hook-active.png);
						}
					}
					&.fork{
						background-image: url(../image/fork.png);
						&.active{
							background-image: url(../image/fork-active.png);
						}
					}
				}
				&.active,&:active{
					.hook{
						background-image: url(../image/hook-active.png);
					}
				}
				&.active,&:active{
					.fork{
						background-image: url(../image/fork-active.png);
					}
				}
			}
		}
		.next-btn{
			width: 100%;
			height: 88/@ag-num;
			line-height: 88/@ag-num;
			color: #C4C4C4;
			font-size: 30/@ag-num;
			text-decoration: underline;
			text-align: center;
			outline: none;
			border: none;
			background: none;
			margin-top: 20/@ag-num;
			&.active{
				color: #030303;
			}
		}
	}
}

.mask{
	background: rgba(#000000,0.4);
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.mask-content{
	display: none;
	background: white;
	width: 518/@ag-num;
	height: 260/@ag-num;
	border-radius: 10/@ag-num;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -130/@ag-num;
	margin-left: -259/@ag-num;
	box-sizing: border-box;
	padding: 30/@ag-num 60/@ag-num;
	.input-box{
		display: block;
		width: 100%;
		height: 88/@ag-num;
		border: 1px solid #e6e6e6;
		border-radius: 1000px;
		background: #f7f7f7;
		box-sizing: border-box;
		padding: 20/@ag-num 0;
		input{
			display: block;
			border: none;
			outline: none;
			width: 100%;
			height: 100%;
			line-height: 48/@ag-num;
			box-sizing: border-box;
			padding: 0 40/@ag-num;
			background: none;
			font-size: 32/@ag-num;
		}
	}
	.title{
		text-align: center;
		font-size: 36/@ag-num;
		&.right{
			color: #3fb217;
		}
		&.error{
			color: #ff0505;
		}
	}
	.btn-group{
		a{
			display: block;
			text-align: center;
			width: 290/@ag-num;
			color: white;
			font-size: 36/@ag-num;
			font-weight: 700;
			line-height: 88/@ag-num;
			border-radius: 1000px;
			background: #f17800;
			margin: 15/@ag-num auto 0 auto;
		}
	}
}

.sign-box{
	display: block;
	width: 650/@ag-num;
	height: 650/@ag-num;
	background-color: white;
	z-index: 1;
	position: relative;
	border-radius: 10/@ag-num;
	box-sizing: border-box;
	padding: 75/@ag-num;
	margin: 20/@ag-num auto;
	.name-box{
		display: block;
		width: 100%;
		margin-bottom: 30/@ag-num;
		&.error{
			input{

			}
			.error-msg{
				display: block;
			}
		}
		.error-msg{
			color: #FD3F3F;
			font-size: 30/@ag-num;
			display: none;
		}
		input{
			width: 100%;
			border: none;
			outline: none;
			line-height: 88/@ag-num;
			height: 88/@ag-num;
			border-bottom: 1px solid #C4C4C4;
			font-size: 36/@ag-num;
			color: #000000;
		}
	}
	.btn-sign{
		display: block;
		width: 100%;
		height: 88/@ag-num;
		background: url(../image/btn-bg.png) center center no-repeat;
		background-size: cover;
		text-align: center;
		color: white;
		font-size: 30/@ag-num;
		border-radius: 1000px;
		line-height: 88/@ag-num;
		cursor: pointer;
		margin-top: 70/@ag-num;
		&:active{
			opacity: 0.8;
		}
	}
}

.progress{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 15/@ag-num;
	background: rgba(73, 157, 255, 0.3);
	.progress-content{
		height: 100%;
		background: rgba(73, 157, 255, 1);
		width: 50%;
		border-radius: 0 0 0 10/@ag-num;
	}
}
